
  
  <template>
  <el-card class="page pageScroll">
    <template #header>邀请学生注册</template>
    <div class="inviteContent">
      <img :src="url" class="img" ref="img" />
      <div class="title">
        {{ userStore.userInfo?.organizationName }}部落专属小程序码
      </div>
      <div class="desc">
        复制小程序码，分享给学生或家长，用户注册后，将自动成为您所在机构的用户！
      </div>
      <elButton type="primary" @click="onDownload">复制小程序码</elButton>
    </div>
  </el-card>
</template>
  
<script setup lang="ts">
import { useRequest } from 'vue-hooks-plus';
import API from '@/api/api';
import { downloadWithUrl } from '@/utils/download';
import { computed, ref } from 'vue';
import { useMessage } from '@/hooks/useMessage';
import useUserStore from '@/store/modules/user';
const userStore = useUserStore();
const message = useMessage();
const img = ref();
const { data } = useRequest(() =>
  API.studentController.invite(
    {},
    {
      responseType: 'blob',
    }
  )
);
const url = computed(() => {
  if (data.value) {
    return URL.createObjectURL(data.value);
  }
  return '';
});
async function onDownload() {
  // downloadWithUrl(url.value, '二维码.png');
  const blob = data.value;
  // blob.type = 'image/png';
  await navigator.clipboard.write([
    new ClipboardItem({
      ['image/png']: blob,
    }),
  ]);
  message.success('复制成功');
}
</script>
<style lang="scss" scope>
.inviteContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  .img {
    margin: 20px;
    width: 300px;
  }
  .title {
    font-weight: bold;
  }
  .desc {
    margin: 20px;
  }
}
</style>